<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
        >

<ui:component>
    <style type="text/css">

        .verticalSeparator {
            height: 70px;
        }

        .logoHeader {
            width: 660px;
            height: 80px; /*height: 100%; */
            vertical-align: top;
            float: left;
            font: 30px italic;
            text-shadow: darkgray;
            background: #a76deb;

        }

        .searchHeder {
            width: 240px;
            height: 80px; /*height: 100%; */
            vertical-align: top;
            float: right;
            text-align: right;
            background: #9ab396;

        }

        .middleDiv {
            width: 100%;
            height: 30px;
            margin-top: 25px;
            margin-left: 5px;
            vertical-align: middle;

        }

        .textLogo {
            color: rgb(255, 255, 255);
            font-weight: 200;

        }

        .barsearch {
            height: 14px;
            width: 100px;
            padding: 2px 3px;
            font-size: 11px;
            font-weight: bold;
        }

        .buttonFind {
            color: rgb(255, 255, 255);
            font-weight: 200;
            background: #7474f6;
            border: groove 1px;
            border-color: #454573;
            cursor: pointer;
           
        }

        .darkBorderLine {
            border: groove 1px;
            border-color: #454573;
        }

    </style>
    <a4j:form>

        <rich:toolBar height="34" width="100%" itemSeparator="disc">
            <rich:toolBarGroup>
                <h:graphicImage  onclick="backToHome();" value="./style/images/welcomeLogo.png" style="cursor:pointer; background:transparent;"/>
                <!--<h:outputLabel onclick="backToHome();" style="cursor:pointer; font-size:20px; margin:5px; color:white" value="Welcome To BeConnected   "/>-->
                <a4j:jsFunction name="backToHome" action="#{welcome.home}"/>

            </rich:toolBarGroup>

            <rich:toolBarGroup location="right">
                <rich:dropDownMenu horizontalOffset="-2" showDelay="500">

                    <f:facet name="label">
                        <h:panelGrid cellpadding="0" cellspacing="0" columns="2"
                                     style="vertical-align:middle">
                            <h:outputText value="#{resources.settingsMeni}"/>
                        </h:panelGrid>
                    </f:facet>

                    <rich:menuGroup value="#{resources.languageMenuItem}">
                        <rich:menuItem value="#{resources.englishMenuItem}">
                            <a4j:actionparam name="language" value="en" assignTo="#{languageBean.language}"/>
                        </rich:menuItem>
                        <rich:menuItem value="#{resources.serbianMenuItem}">
                            <a4j:actionparam name="language" value="sr" assignTo="#{languageBean.language}"/>
                        </rich:menuItem>
                    </rich:menuGroup>
                    <rich:menuGroup value="#{resources.themeMenuGroup}">
                        <rich:menuItem value="BlueSky">
                            <a4j:actionparam name="skin" value="blueSky" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="BlueSky Modified">
                            <a4j:actionparam name="skin" value="blueSky Modified" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Laguna">
                            <a4j:actionparam name="skin" value="laguna" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Class-X">
                            <a4j:actionparam name="skin" value="class-X" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Dark-X">
                            <a4j:actionparam name="skin" value="dark-X" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Classic">
                            <a4j:actionparam name="skin" value="classic" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="JapanCherry">
                            <a4j:actionparam name="skin" value="japanCherry" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Ruby">
                            <a4j:actionparam name="skin" value="ruby" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Wine">
                            <a4j:actionparam name="skin" value="wine" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="DeepMarine">
                            <a4j:actionparam name="skin" value="deepMarine" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="EmereldTown">
                            <a4j:actionparam name="skin" value="emeraldTown" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Sakura">
                            <a4j:actionparam name="skin" value="sakura" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                        <rich:menuItem value="Default">
                            <a4j:actionparam name="skin" value="default" assignTo="#{skinBean.skin}"/>
                        </rich:menuItem>
                    </rich:menuGroup>


                </rich:dropDownMenu>
                <h:inputText styleClass="barsearch" value="#{welcome.friendSearchKey}"/>
                <h:commandButton action="#{welcome.findFriends}" value="#{resources.findLabel}"/>
            </rich:toolBarGroup>
        </rich:toolBar>
        <!--</h:panelGroup>-->
    </a4j:form>
</ui:component>


</html>
